<template>
  <div class="container">
    <el-card>
      <!-- 用一个行列布局 -->
      <el-row type="flex" justify="space-between" align="center" style="height: 50px">
        <el-col :span="20">
          <span style="padding:0 15px;font-weight:700;color:#606266">学科名称</span>
          <el-input
            v-model="params.subjectName"
            class="input-box"
          ></el-input>
          <el-button size="small" @click="clear">清除</el-button>
          <el-button size="small" type="primary" @click="search">搜索</el-button>
        </el-col>
        <el-col :span="4">
          <el-row type="flex" justify="end">
              <el-button icon="el-icon-edit" size="small" type="success" @click="showAddDialog">新增学科</el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-alert
        :title="'数据一共'+total+'条'"
        type="info"
        show-icon
        :closable="false" >
      </el-alert><br>
      <el-table :data="subjectList" style="width: 100%">
        <el-table-column
          type="index"
          :index="indexMethod"
          label="序号"
          width='80'
        >
        </el-table-column>
        <el-table-column prop="subjectName" label="学科名称" width='120'> </el-table-column>
        <el-table-column prop="creatorID" label="创建者" width='120'> </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width='180'>
           <template #default="{row}">
              {{ formatDate(row.addDate) }}
            </template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示" width='120'>
          <template #default='{row}'>
            {{row.isFrontDisplay?'是':'否'}}
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录" width='120'> </el-table-column>
        <el-table-column prop="tags" label="标签" width='120'> </el-table-column>
        <el-table-column prop="totals" label="题目数量" width='120'> </el-table-column>
        <el-table-column fixed="right" label="操作" width="240">
          <template #default="scope">
            <el-link type="primary" :underline="false" @click='goDirectory(scope.row)'>
              学科分类
            </el-link>
            <el-link type="primary" :underline="false" @click="goTag(scope.row)">
              学科标签
            </el-link>
            <el-link type="primary" :underline="false" @click="editSubject(scope.row)">
              修改
            </el-link>
            <el-link type="primary" :underline="false" @click='delSubject(scope.row)'>
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table><br>

        <el-pagination
          background
          layout="->, prev, pager, next, sizes, jumper"
          :total="total"
          :current-page="params.page"
          :page-size="params.pagesize"
          :page-sizes="[5, 10, 15, 20]"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
    </el-card>
    <subjects-add :detail='detail' :addDialogVisible='addDialogVisible' @closeDialog='closeDialog'/>
  </div>
</template>

<script>
import SubjectsAdd from '../components/subjects-add.vue'
import dayjs from 'dayjs'
import { list, remove, detail } from '@/api/hmmm/subjects.js'
export default {
  components: {
    SubjectsAdd
  },
  data () {
    return {
      subjectList: [],
      params: {
        page: 1,
        pagesize: 10,
        subjectName: null
      },
      total: 0,
      addDialogVisible: false,
      detail: { subjectName: '', isFrontDisplay: 1 }
    }
  },
  mounted () {
    this.getSubjectList()
  },
  methods: {
    async getSubjectList () {
      const { data: res } = await list(this.params)
      this.subjectList = res.items
      this.total = res.counts
    },
    showAddDialog () {
      // 打开对话框
      this.addDialogVisible = true
    },
    handleCurrentChange (page) {
      this.params.page = page
      // 重新渲染页面
      this.getSubjectList()
    },
    handleSizeChange (pagesize) {
      this.params.page = 1
      this.params.pagesize = pagesize
      // 重新渲染页面
      this.getSubjectList()
    },
    // 序号自增
    indexMethod (index) {
      return index + 1 + (this.params.page - 1) * this.params.pagesize
    },
    // 格式化日期
    formatDate (value, str = 'YYYY-MM-DD HH:mm:ss') {
      return dayjs(value).format(str)
    },
    // 编辑前的回显，把数据传给子组件
    async editSubject (data) {
      // 调接口，进行数据回显
      const { data: res } = await detail(data)
      this.detail = res
      this.addDialogVisible = true
    },
    delSubject (data) {
      this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(data)
        this.$message.success('删除成功!')
        // 如果当前页只有1条数据，_page需要-1
        if (this.subjectList.length === 1) {
          this.params.page--
        }
        // 重新渲染
        this.getSubjectList()
        // 隐藏对话框
        // this.dialogFormVisible = false
        this.$message.success('删除成功!')
      })
    },
    closeDialog () {
      this.addDialogVisible = false
      this.detail = { subjectName: '', isFrontDisplay: 1 }
    },
    goDirectory (data) {
      this.$router.push({ path: '/subjects/directorys', query: { id: data.id, name: data.subjectName } })
    },
    goTag (data) {
      this.$router.push({ path: '/subjects/tags', query: { id: data.id, name: data.subjectName } })
    },
    async search () {
      const { data: res } = await list(this.params)
      this.subjectList = res.items
      this.total = res.counts
    },
    // 清除
    clear () {
      this.params.subjectName = ''
      // 重新渲染页面
      this.getSubjectList()
    }
  }
}
</script>

<style scoped lang='scss'>
.container{
  font-size: 14px;
  color:#606266
}

.input-box{
  width: 200px;
  margin-right: 15px;
}
.el-link{
  padding:0 5px
}
</style>
